<template>
  <el-row :gutter="15" class="data-cards">
    <el-col :span="6" v-for="(card, index) in dataCards" :key="index">
      <div class="stat-card" :class="card.color">
        <div class="stat-card-header">
          <span>{{ card.title }}</span>
          <i :class="card.icon"></i>
        </div>
        <div class="stat-card-number">
          {{ card.value }}
          <span class="trend" :class="card.trendType">
            {{ card.trend }}
            <i :class="card.trendType === 'up' ? 'fa fa-caret-up' : 'fa fa-caret-down'"></i>
          </span>
        </div>
        <div class="stat-card-footer">
          <span>{{ card.desc }}</span>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

interface StatCard {
  title: string;
  value: string;
  trend: string;
  trendType: 'up' | 'down';
  desc: string;
  icon: string;
  color: string;
}

export default defineComponent({
  name: 'StatCardSection',
  props: {
    dataCards: {
      type: Array as PropType<StatCard[]>,
      required: true
    }
  }
})
</script>

<style scoped lang="scss">
.data-cards {
  .stat-card {
    height: 110px;
    padding: 15px;
    color: white;
    border-radius: 8px;
    position: relative;
    overflow: hidden;

    &.blue {
      background: linear-gradient(45deg, #1890ff, #69c0ff);
    }
    &.green {
      background: linear-gradient(45deg, #52c41a, #95de64);
    }
    &.orange {
      background: linear-gradient(45deg, #fa8c16, #ffd591);
    }
    &.purple {
      background: linear-gradient(45deg, #722ed1, #b37feb);
    }

    .stat-card-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      
      span {
        font-size: 14px;
        opacity: 0.9;
      }
      
      i {
        font-size: 20px;
      }
    }

    .stat-card-number {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 8px;
      
      .trend {
        font-size: 14px;
        font-weight: normal;
        margin-left: 8px;
        
        &.up {
          color: #52c41a;
        }
        
        &.down {
          color: #f5222d;
        }
      }
    }

    .stat-card-footer {
      font-size: 12px;
      opacity: 0.8;
    }
  }
}
</style> 